<template>
  <div class="">
    <p-modal
      title="新增"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >

        <p-form-model-item ref="empid" label="员工姓名" prop="empid">

          <p-select
            show-search
            placeholder=""
            option-filter-prop="children"
            style="width: 200px"
            :disabled = "state == 'edit'"
            :filter-option="filterOption"
            v-model="form.empid"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="employeeChange"
          >
            <p-select-option  v-for="(item, index) in employeeList" :key="index" :value="item.id + ''">
              {{item.empname }}
            </p-select-option>
          </p-select>

        </p-form-model-item>

        <p-form-model-item ref="empno" label="员工编号" prop="empno">
          <p-input
           disabled
            v-model="form.empno"
          />
        </p-form-model-item>

        <p-form-model-item ref="skillId" label="技能名称" prop="skillId">
          <p-select
            show-search
            placeholder=""
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            v-model="form.skillId"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="skillChange"
          >
            <p-select-option  v-for="(item, index) in skillList" :key="index" :value="item.id">
              {{item.skillName }}
            </p-select-option>
          </p-select>
        </p-form-model-item>

        <p-form-model-item ref="skillCode" label="技能代码" prop="skillCode">
          <p-input
            disabled
            v-model="form.skillCode"
          />
        </p-form-model-item>        

        <p-form-model-item ref="effectiveDate" label="现生效日期" prop="effectiveDate">
          <p-date-picker 
            valueFormat="YYYY-MM-DD"
            :disabled = "state == 'edit'"
            v-model="form.effectiveDate"
           @change="onChange" />
        </p-form-model-item>

        <p-form-model-item ref="expirationDate" label="现截止日期" prop="expirationDate">
          <p-date-picker 
            valueFormat="YYYY-MM-DD"
            :disabled = "state == 'edit'"
            v-model="form.expirationDate"
           @change="onChange" />
        </p-form-model-item>

      </p-form-model>
    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";
import moment from 'moment';


export default {
  props: {
    lineno: String,
    selectedId: String || Number,
  },
  data() {
    return {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 12
      },
      visible: false,
      confirmLoading: false,
      form: {
        empid: '',
        empname: '',
        empno: '',
        skillCode: '',
        skillId: '',
        skillName: '',
        skillType: '',
        effectiveDate: '',
        expirationDate: '',
      },      
      rules: {
        empid: [
          { required: true, message: '请选择员工', trigger: 'blur' },
        ],
        skillId: [
          { required: true, message: '请选择技能', trigger: 'blur' },
        ],
        effectiveDate: [
          { required: true, message: '请选择现生效日期', trigger: 'blur' },
        ],
        expirationDate: [
          { required: true, message: '请选择现截止日期', trigger: 'blur' },
        ],        
      },
      skillList: [],
      employeeList: [],
      url: {
        add: '/mes-manpower/mesHrMemberSkillAdjustDetail',  // 新增人员技能调整详情
        edit: '/mes-manpower/mesHrMemberSkillAdjustDetail', // 编辑
        workRoomList: '/basic-business/mesBaArchitecture/workRoomList', // 车间列表
        lineList: '/basic-business/mesBaArchitecture/childList', // 线体列表 工厂架构维护-获取子数据
        employeeList: '/mes-manpower/mesHrEmployeeinfo/list', // 员工列表
        skillList: '/mes-manpower/mesHrSkillBank/list'  // 技能列表
      },
      state: 'add'
    };
  },
  mounted() {},
  methods: {
    getEmployeeList(){
      const params = {
        limit: 1000000,
        pageNo: 1,
        lineno: this.lineno,
      }
      getAction(this.url.employeeList, params).then( res => {
        if(res.success) {
          this.employeeList = res.data.records
        }
      } )
    },
    getSkillList(){
      const params = {
        limit: 1000000,
        pageNo: 1
      }
      getAction(this.url.skillList, params).then( res => {
        if(res.success) {
          this.skillList = res.data.records
        }
      } )
    },

    showModal(record) {
      this.visible = true;
      Object.assign(this.form, this.$options.data().form)
      this.getEmployeeList()
      this.getSkillList()
      if(record) {
        this.state = 'edit'
        console.log(record);
        
        record.effectiveDate = moment(record.effectiveDate).format("YYYY-MM-DD")
        record.expirationDate = moment(record.expirationDate).format("YYYY-MM-DD")
        for (let key in this.form) {
          this.form[key] = record[key]
        }
        this.form.id = record.id
      } else {
        this.state = 'add'
      }
      console.log(this.state );
      
    },
    handleOk(e) {
      
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          const params = JSON.parse(JSON.stringify(this.form))
          params.memberSkillAdjustId = this.selectedId
          if(this.state == 'add' ) {
            postAction(this.url.add, params).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })
          }
          if( this.state == 'edit' ){         
            putAction(this.url.edit, params).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })
          }
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },

    employeeChange(id){
      this.employeeList.forEach(ele => {
        if(ele.id == id) {
          this.form.empname = ele.empname
          this.form.empno = ele.empno
        }
      })
    },

    skillChange(id){
      this.skillList.forEach(ele => {
        if(ele.id == id) {
          this.form.skillCode = ele.skillCode
          this.form.skillName = ele.skillName
          this.form.skillType = ele.skillType
        }
      })
    },

    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

  },
  components: {},
};
</script>

<style lang="less" scoped>
</style>
